/***
 * 事件对象
 * recat中触发的事件为合成事件  合成事件具有较好的浏览器兼容性
 * 合成事件对象中 可以获取到原生事件对象  及其DOM对象
 *
 * 通过对象处理事件的一些默认行为
 * 事件冒泡
 * 默认行为
 *
 */
import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div onClick={this.handleTop}>
        <button onClick={this.handle}>点击</button>
        <div>
          <a href="https://www.baidu.com" onClick={this.goTo}>
            去百度
          </a>
        </div>
      </div>
    )
  }
  goTo(event) {
    // 阻止默认行为
    event.preventDefault()
    // 阻止冒泡
    event.stopPropagation()
  }
  handleTop() {
    console.log('上级触发了')
  }
  handle(event) {
    // 默认事件触发后  可以在事件处理函数中 通过第一个形参 接收到事件对象
    console.log('点击到了')
    // 合成事件对象
    console.log(event)
    // 原生事件对象
    console.log(event.nativeEvent)
    // DOM对象
    console.log((event.target.style.color = 'red'))
    // 阻止冒泡
    event.stopPropagation()
  }
}
